// 动画效果复用 封装复杂的动画逻辑，通过参数控制时长、缓动函数等
@mixin keyframes-animation($name, $duration, $timing-function){
    @keyframes #{$name} {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    animation: #{$name} $duration $timing-function;
}

.faded-in {
    @include keyframes-animation("fade-in", 1s, ease-in);
}

/*
    编译后
      @keyframes fade {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    .fade-in {
        animation: fade 0.5s ease-in;
    }
*/